
<template>
  <el-container>
    <el-header>
      <AdminHeader />
    </el-header>
    <el-container>
      <el-aside>
        <AdminAside />
      </el-aside>
      <el-main style="margin: 0 auto;">
  <el-table
    :data="
      commentsInfo.filter(
        (data) =>
          !search || data.comments_content.toLowerCase().includes(search.toLowerCase())
      )
    "
    style="width: 100%;"
    class="my-table"
  >
    <el-table-column label="评论id" prop="comments_id" width=110> </el-table-column>
    <el-table-column label="新闻标题" prop="news_title" width=500>
    </el-table-column>
    <el-table-column label="用户名" prop="uname" width=150> </el-table-column>
    <el-table-column label="评论内容" prop="comments_content"> </el-table-column>

    <el-table-column align="right">
      <template slot="header" slot-scope="scope">
        <el-input v-model="search" size="mini"  placeholder="输入关键字搜索" />  
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="delComments(scope.row.comments_id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</el-main>
</el-container>
</el-container>
</template>

<script>
import AdminAside from '@/components/AdminAside.vue';
import AdminHeader from '@/components/AdminHeader.vue';
import { mapState } from "vuex";
export default {
  data() {
    return {
      commentsInfo: [],
      search: '',
    };
  },
  components: {
    AdminAside,
    AdminHeader
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    getCommentsInfo() {
      this.axios
        .get(`http://localhost:3000/aManger/getNesComments`)
        .then((res) => {
          this.commentsInfo = res.data.data;
          console.log(this.commentsInfo);
        })
        .catch((err) => {
          console.error(err);
        });
    },

    delComments(cid) {
      console.log(cid);
      this.axios
        .delete(`http://localhost:3000/aManger/deleteUserComments`, {
          data: {
            comments_id: cid,
          },
        })
        .then((res) => {
          // alert("删除成功")
          this.$message.success('删除成功')
          this.getCommentsInfo();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getCommentsInfo();
  },
};
</script>

<style scoped>
/* .el-table-column{
  text-align: center;
} */
.el-header {
  padding: 0;
}

.el-aside {
  color: #000000;
  text-align: center;
  height: 880px;
}
 
</style>
